import {HomeAPI} from 'api';
import React, {useCallback} from 'react';
import {
  StyleSheet,
  Text,
  ImageBackground,
  View,
  TouchableOpacity,
  Image,
} from 'react-native';
// import {Icon} from 'react-native-elements';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {STYLE_COLOR} from 'variables';

const ProgressGoalView: React.FC<HomeAPI.HomeGoalMessage> = ({
  background_pic,
  terminal_info,
  code_card_info,
  can_jump,
  logo = [],
}) => {
  const insets = useSafeAreaInsets();

  const goPolicyGoalPage = useCallback(() => {
    // NavigationService.navigate({routeName: ScreenID.Service_Provider_Policy});
  }, []);

  return (
    <TouchableOpacity
      activeOpacity={1}
      disabled={!can_jump}
      onPress={goPolicyGoalPage}>
      <ImageBackground
        source={{uri: background_pic}}
        style={[
          styles.container,
          {
            paddingTop: insets.top + 8,
          },
        ]}>
        {/* 我的产品 */}

        <View style={styles.myProduct}>
          <Text style={styles.productName}>我的产品</Text>

          {!!logo.length ? (
            <View style={styles.imgContainer}>
              {logo.map((pic, index) => (
                <Image
                  key={index}
                  source={{
                    uri: pic,
                  }}
                  style={styles.productImg}
                />
              ))}
            </View>
          ) : (
            <Image
              source={require('assets/homePage/add.png')}
              style={styles.productImg}
            />
          )}
        </View>

        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}>
          <View style={styles.row}>
            <View style={styles.targetItem}>
              <Text style={styles.normalText}>{terminal_info.name}</Text>

              <Text style={styles.targetValue}>{terminal_info.value}</Text>
            </View>
            <View style={styles.targetSeparator} />
            <View style={styles.targetItem}>
              <Text style={styles.normalText}>{code_card_info.name}</Text>
              <Text style={styles.targetValue}>{code_card_info.value}</Text>
            </View>
          </View>
          {/* <Icon
            name="right"
            type="antdesign"
            size={14}
            color={STYLE_COLOR.THEME_TEXT}
          /> */}
        </View>
      </ImageBackground>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    width: 375,
    height: 234,
    paddingRight: 16,
    paddingBottom: 24,
  },
  row: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  targetItem: {
    flex: 1,
    marginLeft: 24,
  },
  normalText: {
    color: STYLE_COLOR.THEME_TEXT,
    fontSize: 13,
  },

  targetSeparator: {
    width: StyleSheet.hairlineWidth,
    height: 40,
    backgroundColor: STYLE_COLOR.CONTENT_BACKGROUND,
    opacity: 0.4,
  },
  targetValueContainer: {
    marginTop: 8,
  },
  targetValue: {
    color: STYLE_COLOR.THEME_TEXT,
    fontSize: 28,
    fontWeight: 'bold',
  },

  myProduct: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginTop: 16,
    marginBottom: 16,
    marginLeft: 24,
  },
  productName: {
    fontSize: 13,
    color: STYLE_COLOR.THEME_TEXT,
    marginRight: 4,
  },
  imgContainer: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  productImg: {
    height: 20,
    width: 20,
    borderRadius: 10,
    marginLeft: 4,
    marginBottom: 4,
  },
});

export default ProgressGoalView;
